<template>
  <div class="tw-imageanti"
    :style="{backgroundImage: `linear-gradient(${deg}deg, ${bgColor1}, ${bgColor2 || bgColor1})`, textAlign: align}">
    <img @click="handleClick"
      :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
      v-if="image && image.length>0"
      :src="`${$twApp.fileBaseUrl}${image[0].localPath}`" />
      <span v-if="text" class="tw-imageanti-text" :style="{color: textColor, top: textTop, left: textLeft, fontSize: textFontSize, fontWeight: isBold?'700':'400'}">{{text}}</span>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'imageanti',

  mixins: [style],

  props,

  computed: {
    style () {
      return {}
    }
  },

  methods: {
    setStyle () {
      let style = ''
      // style += `
      //   ::root.tw-imageanti > img {
      //     // padding: ${this.itemPadding};
      //     // background: ${this.itemBg};
      //   }

      // `
      if (this.funcStyle !== '' && typeof this.funcStyle === 'function') {
        style = this.funcStyle(this)
      }

      this.addStyle(style)
    },
    handleClick () {
      if (this.useClick) {
        if (this.text) {
          this.$emit('click', text)
        } else {
          this.$emit('click', '1')
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .tw-imageanti {
    width: 600px;
    height: 300px;
    overflow: hidden;
  }

  .tw-imageanti > img {
    width: 100%;
    height: 100%;
  }

  .tw-imageanti-text {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
